import { createApp } from 'vue'
// 引入pinia
import { createPinia } from 'pinia'
// 引入pinia-plugin-persist 数据持久化
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// 引入App组件
import App from './App.vue'
// 引入路由
import router from './router'
// 引入全局样式
import '@/styles/common.scss'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'

// element-plus国际化
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'


//引入图片懒加载插件
// import Lazyload from "vue3-lazyload";

// 自定义指令实现懒加载
import { LazyPlugin } from '@/directives'

/* add icons to the library */
library.add(fas, far, fab)
const app = createApp(App)
// pinia管理状态
const pinia = createPinia()
// 注册pinia-plugin-persist 数据持久化
pinia.use(piniaPluginPersistedstate)

app.use(pinia)

// 路由
app.use(router)


// element-plus国际化
app.use(ElementPlus, {
	locale: zhCn,
})

// 字体图标
app.component('font-awesome-icon', FontAwesomeIcon)
app.component('font-awesome-layers', FontAwesomeLayers)
app.component('font-awesome-layers-text', FontAwesomeLayersText)

//注册懒加载插件
// app.use(Lazyload, {
// 	loading: "@/assets/images/loading.gif",//可以指定加载中的图像
// 	error: "@/assets/images/none.png",//可以指定加载失败的图像
// 	attempt: 1,//尝试加载次数
// 	listenEvents: ["scroll"],//监听的事件
// 	observerOptions: {
// 		root: null,//指定根元素，默认为window
// 		rootMargin: "0px",//根元素与目标元素之间的距离
// 		threshold: 0.1//观察者的阈值
// 	}
// });

app.use(LazyPlugin)

app.mount('#app')
